<template>
    <div class="invite_box">
        <van-dialog v-model="show" title="登录" :showConfirmButton="false">
            <van-form @submit="onformObj">
                <van-field v-model="phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="telRules" />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ validator, message: '请输入8-16位字母加数字' }]"
                />
                <div style="margin: 16px; display: flex; justify-content: space-around">
                    <van-button round type="primary" class="enter">登录</van-button>
                    <span class="signin" @click="signin()">注册</span>
                </div>
            </van-form>
        </van-dialog>
        <div style="margin-top: 30%; padding: 10px">
            <div class="title">{{ loginwxnickname }}花钱请您看</div>
            <van-card :thumb="cover">
                <template #title>
                    <div style="margin-top: 10px; font-size: 16px; font-weight: 600">{{ column_title }}</div>
                </template>
                <template #desc>
                    <div style="margin-top: 10px; color: rgb(115 115 115)">{{ title }}</div>
                </template>
            </van-card>
            <div style="text-align: center; color: red; margin-top: 20px">限量11个名额，赶快领取</div>
            <div style="text-align: center; margin-top: 20px">
                <van-button round type="info" style="width: 80%; backgroundColor: #ed754d; border: 1px solid #ed754d" @click="getkec()">马上抢</van-button>
            </div>
        </div>
        <xjweixinreglogin @loginData="loginData" ref="xjwxreglogincom"></xjweixinreglogin>
    </div>
</template>
<script>
import xjweixinreglogin from '@/components/frontshop/xjweixinreglogin.vue';
import Cookies from 'js-cookie';
import {api_shareInfoInviteFriend} from "../../api/index"
export default {
    components: {
        xjweixinreglogin
    },
    data() {
        return {
            show:false,
            validator(val) {
                return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
            },
            telRules: [
                {
                    required: true,
                    message: '手机号不能为空',
                    trigger: blur
                },
                {
                    validator: (value) => {
                        return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
                    },
                    message: '请输入正确的手机号格式',
                    trigger: 'onBlur'
                }
            ],
            phone: '',
            password: '',
            cover: '',
            loginwxnickname: '',
            column_title: '',
            title: '',
            obj: {
                k_id: this.$route.query.id,
                column_id: this.$route.query.columnid,
                faqi_uid: this.$route.query.faqi_uid,
            },
            formobj:{
                k_id: this.$route.query.id,
                column_id: this.$route.query.columnid,
                faqi_uid: this.$route.query.faqi_uid,
            }
        };
    },
    methods: {
        async getkec(){
            let res = await this.$frontaxios.post(this.$front.api_getInviteFriendKnowledge, this.formobj);
            console.log(res)
            if(res.code==1){
                this.$message.success('领取成功');
                this.$router.push({name:'my'})
            }
            if(res.code==-1){
                this.$message.success('领取失败，您已拥有');
                this.$router.push({name:'my'})
            }
        },
        loginData(val) {
            if (val == 1) {
                this.query();
            }
        },
        signin() {
            this.$router.push({ name: 'myregister' }); //注册git
        },
        async onformObj(info) {
            let res = await this.$frontaxios.post(this.$front.postLoginUser, info);
            console.log(res);
            if (res.code == 1) {
                Cookies.set('fronttoken', res.data.token);
                Cookies.set('frontrefreshtoken', res.data.refreshtoken);
                localStorage.setItem('fronttoken', res.data.token);
                localStorage.setItem('frontrefreshtoken', res.data.refreshtoken);
                sessionStorage.setItem('htmllogintag', 1);
                this.$notify({ type: 'success', message: '登录成功' });
                this.show = false;
                location.reload();
            } else if (res.code == -3) {
                //出现验证码
                console.log('出现验证码');
            } else {
                this.$notify({ type: 'warning', message: '登录失败，请检查手机号和密码' });
            }
        },
        async query() {
            let res = await this.$frontaxios.post(this.$front.api_shareInfoInviteFriend, this.obj);
            console.log(res);
            this.loginwxnickname = res.data.user.loginwxnickname;
            this.title = res.data.knowledge.title;
            this.column_title = res.data.column.title;
            this.cover = res.data.column.cover;
            this.formobj.shop_id=res.data.user.shop_id
            this.formobj.uid=res.data.user.uid
        }
    },
    created() {
        this.query();
        if (isWeixin()) {
            //let rst = Cookies.get('fronttoken');
            let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;
            if (logintag == 0) {
                this.show = true;
            } else {
                this.show = false;
            }
        } else {
            let rst = localStorage.getItem('fronttoken');
            let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0;
            this.action_show = false;
            console.log(htmllogintag, rst, 'ce');
            if (rst == undefined && htmllogintag == 0) {
                this.show = true;
            } else {
                this.show = false;
            }
        }
    }
};
</script>
<style lang='scss' scoped>
.title {
    height: 35px;
    background-color: #f0b15a;
    text-align: center;
    line-height: 35px;
}
.van-card {
    margin-top: 0;
    background-color: #f3c85c;
    height: 150px;
}
.van-card__header {
    margin-top: 5%;
}
.enter,
.signin {
    text-align: center;
    line-height: 44px;
    width: 100px;
    border: 1px solid;
    border-radius: 2rem;
}
</style>
